<HTML>
<HEAD>	
<link type="text/css" rel="stylesheet" href="/2112PowerWindows/assets/window12.css">
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/core.js"></script>
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/events.js"></script>
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/css.js"></script>
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/coordinates.js"></script>
<script language="JavaScript" type="text/javascript" src="/2112PowerWindows/tool-man/drag.js"></script>
<script language="JavaScript" type="text/javascript">

cbDrop = function(strName, x, y)
{
   //alert(strName) ;
}

cbDrag = function(strName, x, y)
{
   //alert(strName) ;
}

destroy = function(thePanel)
{
   alert("destroy") ;
   //thePanel.destroy() ;
}

var addListener = function() {
    if ( window.addEventListener ) {
        return function(el, type, fn) {
            el.addEventListener(type, fn, false);
        };
    } else if ( window.attachEvent ) {
        return function(el, type, fn) {
            var f = function() {
                fn.call(el, window.event);
            };
            el.attachEvent('on'+type, f);
        };
    } else {
        return function(el, type, fn) {
            element['on'+type] = fn;
        }
    }
}();


 _2112SnapInPanel_ = function(strName) {
   var m_WindowName = strName ;
   var windowClass = 'window12' ;
   var panelClass  = 'panel12' ;
   var headerClass = 'hd12' ;
   var bodyClass   = 'bd12' ;
   var footerClass = 'ft12' ; 
   var m_iHeaderHeight = 14 ;
   var m_iFooterHeight = 5 ;
   var m_elWindow ;
   var m_elPanel ;
   var m_elBody ;
   var m_elHeader ;
   var m_elFooter ;
   var m_elTitle ;
   var m_DropListener = null ; //there will be only ONE! We do not want to admin a bunch of listeners.
   var m_DragListener = null ;
   var m_UnloadListener = null ;
   var m_iWindowExtX ; 
   var m_iWindowExtY ; 
   var m_iBodyHeight ;
   var m_iHeaderHeight = 14 ;
   var m_iFooterHeight = 5;
   var m_iBorderWidth = 1 ;


   
   elementFactory =  function(theParent, strUniqueName, strClass, iWidth, iHeight)
   {
      var a ;
      var theElement = document.createElement("div");   
         if( null != strUniqueName )
         {
            a = document.createAttribute("id");
            a.nodeValue = strUniqueName ;
            theElement.setAttributeNode(a);
         }
         a = document.createAttribute("class");
         a.nodeValue = strClass ;
         theElement.setAttributeNode(a);

         if( iWidth > 0 )
            theElement.style.width = iWidth + 'px' ;
         if ( iHeight > 0 )
            theElement.style.height = iHeight + 'px';

         
         theParent.appendChild ( theElement );
         return theElement ;
   }

   //the height of the main window

   this.setWindowExtY = function(iHeight){
      m_iWindowExtY = iHeight - 8 * m_iBorderWidth ;
   }

   this.setWindowExtX = function(iWidth){
      m_iWindowExtX = iWidth - 4 * m_iBorderWidth ;
   }

   this.getWindowExtY = function(){      
      return  m_iWindowExtY  ;
   }

   this.getWindowExtX = function(){      
      return  m_iWindowExtX ;
   }

   this.getBodyHeight = function(){
       return this.getWindowExtY() - m_iHeaderHeight - m_iFooterHeight ;  //to change ; ;     
   }

   this.getBodyWidth = function(){
       return this.getWindowExtX()  ;  //to change ; ;     
   }  

   this.getWindowName = function(){
      return m_WindowName;
   }
   
   this.getWindow = function(){
      return m_elWindow ;
   }
   
   this.getPanel = function(){
      return m_elPanel ;
   }
   
   this.getHeader = function(){
      return m_elHeader ;
   }
   
   this.getBody = function(){
      return m_elBody ;
   }
   
   this.create = function (strTitle, iWidth, iHeight) 
   {     
      var el ;
      this.setWindowExtX(iWidth);
      this.setWindowExtY(iHeight) ;   
      m_iBodyHeight = this.getBodyHeight() ;

      alert("create width/height" + this.getWindowExtX() + "/" + this.getWindowExtY()) ;

      m_elWindow = elementFactory(document.body, m_WindowName + '_' + windowClass, windowClass, 
                     this.getWindowExtX(), this.getWindowExtY());                 
      m_elPanel  = elementFactory(m_elWindow, m_WindowName + '_' + panelClass, panelClass,
               this.getWindowExtX(), this.getWindowExtY());
      
      m_elHeader = elementFactory(m_elPanel, m_WindowName  + '_' + headerClass, headerClass , 
                           -1, m_iHeaderHeight);
      m_elBody   = elementFactory(m_elPanel, m_WindowName + '_' + bodyClass, bodyClass, -1, m_iBodyHeight);      
      m_elFooter = elementFactory(m_elPanel, m_WindowName + '_' + footerClass, footerClass, 
                           -1, m_iFooterHeight);    
      
      elementFactory(m_elHeader, null, 'tl' , -1, -1);
      elementFactory(m_elHeader, null, 'tr' , -1, -1);
      
      
      m_elTitle = document.createElement("span");
      m_elTitle.innerHTML = strTitle ;      
      m_elHeader.appendChild ( m_elTitle );
      
      el = document.createElement("a");
      a = document.createAttribute("href");
      a.nodeValue = "#" ;
		el.setAttributeNode(a);

		addListener(el, "click", this.destroy);
		/*
      a = document.createAttribute("onclick");
      a.nodeValue = 'this.destroy(\'' + m_WindowName + '\')' ;  //this must be solved
      el.setAttributeNode(a);
		*/

	

      
      a = document.createAttribute("class");
      a.nodeValue = "container-close" ;    //style=\"display:block;\"" ;
      el.setAttributeNode(a);
      m_elHeader.appendChild ( el );     
		
	
		
		 
      return m_elBody ;  
   }
   
   this.destroy = function() 
   {
      document.body.removeChild(m_elWindow) ;
   }
   
   this.unlink = function() 
   {
   
   }

   this.moveTo = function(x, y) 
   {
      //implement this!
      //? use toolman?
      m_elWindow.style["top"] =  y + "px";
		m_elWindow.style["left"] = x + "px";
      m_elPanel.style["top"] =  "0px";
		m_elPanel.style["left"] = "0px";
   }
   
   this.resize = function(iWidth, iHeight)
   {
		this.setWindowExtX(iWidth);           //Width and Height get calculated
      this.setWindowExtY(iHeight) ;   
      m_iBodyHeight = this.getBodyHeight() ;
		m_iBodyWidth  = this.getBodyWidth() ;

      m_elWindow.style["width"] =  this.getWindowExtX() + "px";
		m_elWindow.style["height"] = this.getWindowExtY() + "px";
      m_elPanel.style["width"] =  this.getWindowExtX() + "px";
		m_elPanel.style["height"] = this.getWindowExtY() + "px";
		//m_elBody.style["width"] =  iWidth + "px";  // DO NOT ADJUST WIDTH HERE! - it's AUTO.
		m_elBody.style["height"] = m_iBodyHeight + "px";
   }

   this.setTitle = function (strTitle)
   {
      m_elTitle.innerHTML = strTitle ;
   }
   
   
   this.setContent = function (theContent)
   {
      if (theContent.tagName) 
      {
         m_elBody.innerHTML = "";
         m_elBody.appendChild(theContent);
      }
      else 
      {
         m_elBody.innerHTML = theContent;
      }
   }
   
   this.setDropListener = function(dropHandler) 
   {
      m_DropListener = dropHandler ;
   }

   this.setDragListener = function(dragHandler) 
   {
      m_DragListener = dragHandler ;
   }

   this.setUnloadListener = function(unloadHandler) 
   {
      m_UnloadListener = unloadHandler ;
   }
   
   this.onDrop = function(arg)
   {
      //the arg object gets translated into some atoms and the Listener is called.
     //thePanelName, x, y
     if( null != m_DropListener ) 
     {
       m_DropListener(m_WindowName, arg.mousePosition.x, arg.mousePosition.y ) ;
     }
   } 

   this.onStartDrag = function(arg)
   {
      if( null != m_DragListener ) 
     {
       m_DragListener( ) ;
     }
   }
}




PanelFactory2112 = function()
{
   this.create = function (cbDrag, cbDrop, cbUnload, theContent, snapInID, strTitle, 
                        iPreferredWidth, unitW, iPreferredHeight, unitH, bNoBounds, bCanClose) 
   {
      var x = new _2112SnapInPanel_(snapInID) ;
      var drag = ToolMan.drag() ;
      var coordinates = ToolMan.coordinates() ;

//debugger;
      var myBody = x.create( strTitle, iPreferredWidth, iPreferredHeight) ;
      x.setDropListener( cbDrop );
      x.setDragListener( cbDrag );
      x.setUnloadListener( cbUnload );
      x.setContent(theContent) ; 

      //x.setContent('<div align=center><embed src=\"http://www.worldtimeserver.com/clocks/wtsclock001.swf?color=6495ED&wtsid=DE\" width=\"100\" height=\"100\" wmode=\"transparent\" type=\"application/x-shockwave-flash\" /></div>');
      drag.createProxy(x.getWindow(), x.getHeader(), x.onDrop) ;
      return x ;
   } 
}
  var pf2112 ;
  var panel1 ;
  var panel2 ;
   
f1 = function() 
{
	pf2112 = new PanelFactory2112() ;
	var theContent = 'Hello World' ;
	panel1 = pf2112.create(cbDrag, cbDrop, null, theContent, 'snapInID1', 'Hello', 
                        350, 'px', 350, 'px', false, true);
    panel2 = pf2112.create(cbDrag, cbDrop, null, theContent, 'snapInID2', 'Hello2', 
                        150, 'px', 150, 'px', false, true);
}

f2 = function() 
{
   panel2.moveTo(10, 10) ;
}

f3 = function() 
{
   panel1.moveTo(25, 60) ;
	panel1.resize(100, 100) ;
}


initToolMan = function()
{
/*
   var group
	var coordinates = ToolMan.coordinates() ;
	var drag = ToolMan.drag() ;
	var boxDrag = document.getElementById("myPanel"); 
	setContent(document.getElementById("myPanel_bd12"), document.getElementById('content1')) ;
	drag.createProxy(boxDrag, document.getElementById("myPanel_hd12"), cbDrop) ;
	boxDrag = document.getElementById("myPanel2"); 
	setContent(document.getElementById("myPanel2_bd12"), '<b>Hello World</b>') ;
	drag.createProxy(boxDrag, boxDrag, cbDrop) ;
	*/
}


</script>
	
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>A Panel substitute</TITLE>
</HEAD>
<BODY onload="initToolMan()">

<button id="test1" onclick="f1();">1  </button >
<button id="test2" onclick="f2();">2  </button >
<button id="test3" onclick="f3();">3  </button >
<div id="proxy1" style="width:50px;height:50px;border:1px;border-style:solid;">Proxy1</div>
<div id="proxy2" style="width:50px;height:50px;border:1px;border-style:solid;">Proxy2</div>

</BODY>
</HTML>
